<!DOCTYPE html>
<html lang="zh-CN" data-theme="corporate">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生量化积分管理系统</title>
    <script src="./assets/tailwind@3.4.16.js"></script>
    <script type="module">
        import cfg from "./tailwind.config.js";
        tailwind.config = cfg;
    </script>
    <link href="./assets/daisyui@4.7.2.css" rel="stylesheet">

    <script src="./assets/alpinejs@3.js" defer></script>
</head>
<body>
    <div x-data="app()" 
         @resize.window="handleResize"
         x-cloak>
        
        <!-- 移动端顶部 -->
        <header class="flex md:hidden navbar bg-base-100 shadow">
            <button @click="sidebarOpen = true" class="btn btn-ghost">☰</button>
            <h1 class="text-xl font-bold px-4">Student Manage</h1>
        </header>

        <!-- 侧边栏布局 -->
        <div class="drawer lg:drawer-open">
            <input type="checkbox" class="drawer-toggle" x-model="sidebarOpen">
            
            <!-- 主内容区域 -->
            <div class="drawer-content flex flex-col">
                <!-- 桌面顶部栏 -->
                <header class="hidden md:flex navbar bg-base-100 shadow">
                    <h1 class="text-xl font-bold px-4">Student Manage System</h1>
                </header>

                <!-- 内容容器 -->
                <main class="flex-1 p-4">
                    <!-- <template x-for="page in pages" :key="page.id">
                        <div x-show="currentPage === page.id">
                            <h2 class="text-2xl font-bold mb-4" x-text="page.title"></h2>
                            <div class="prose" x-html="page.content"></div>
                        </div>
                    </template> -->
                    <template x-for="page in pages" :key="page.id">
                        <div x-show="currentPage === page.id" 
                             x-transition:enter="opacity-0"
                             x-transition:enter-end="opacity-100"
                             class="page-transition">
                            <!-- 添加空内容保护 -->
                            <template x-if="page.content">
                                <div x-html="page.content"></div>
                            </template>
                            <template x-if="!page.content">
                                <div class="text-error">页面内容未配置</div>
                            </template>
                        </div>
                    </template>

                </main>
            </div>

            <!-- 侧边栏 -->
            <div class="drawer-side">
                <label class="drawer-overlay" @click="sidebarOpen = false"></label>
                <aside class="w-80 bg-base-100 p-4">
                    <h2 class="text-xl font-bold mb-4">Nav</h2>
                    <ul class="menu">
                        <template x-for="item in navItems" :key="item.id">
                            <li>
                                <a :class="{ 'active': currentPage === item.id }" 
                                   @click="changePage(item.id)"
                                   x-text="item.title"></a>
                            </li>
                        </template>
                    </ul>
                </aside>
            </div>
        </div>
    </div>

    <script src="./js/page.js"></script>

    <style>
        [x-cloak] { display: none !important; }
        .page-transition {
            transition: opacity 0.3s ease;
        }
    </style>
</body>
</html>